<template>
  <div class="tea-list-container" style="display: flex;">
    <div class="tea-type-sidebar">
      <h3>茶叶类型</h3>
      <ul>
        <li v-for="type in teaTypes" :key="type" :class="{active: selectedTypes.includes(type)}" @click="toggleType(type)">{{ type }}</li>
        <li :class="{active: selectedTypes.length === 0}" @click="clearTypes">全部</li>
      </ul>
    </div>
    <div class="tea-list-main">
      <h2 class="tea-list-title">茶叶商品列表</h2>
      <div class="search-bar search-bar-beauty">
        <div class="search-input-wrap">
          <input v-model="keyword" placeholder="搜索茶叶..." />
          <span v-if="keyword" class="search-clear" @click="keyword = ''">×</span>
        </div>
      </div>
      <div>
        <div class="tea-card-list">
          <router-link v-for="tea in teas" :key="tea.id" :to="`/tea/${tea.id}`" class="tea-card taobao-card">
            <img :src="tea.img || `/src/assets/tea/longjing.jpg`" :alt="tea.name" />
            <div class="taobao-title">{{ tea.name }}</div>
            <div class="taobao-desc">{{ tea.description }}</div>
            <div class="taobao-price-row">
              <span class="taobao-price">¥{{ tea.price }}</span>
              <span class="taobao-origin-price">¥{{ tea.originPrice || (tea.price * 1.2).toFixed(2) }}</span>
            </div>
            <div class="taobao-stock">库存：{{ tea.stock }}</div>
            <div class="taobao-progress-wrap">
              <div class="taobao-progress-bar">
                <div class="taobao-progress" :style="{width: `${Math.round((tea.sold || (tea.stock * 0.78)) / (tea.stock + (tea.sold || 0)) * 100)}%`}" />
              </div>
              <span class="taobao-progress-text">已售{{ Math.round((tea.sold || (tea.stock * 0.78)) / (tea.stock + (tea.sold || 0)) * 100) }}%</span>
            </div>
          </router-link>
        </div>
        <div class="pagination">
          <button @click="prevPage" :disabled="page === 1">上一页</button>
          <span>第</span>
          <input class="page-input" type="number" v-model.number="inputPage" min="1" :max="maxPage" @change="jumpPage" />
          <span>页</span>
          <button @click="nextPage">下一页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const allTeas = [
  { id: 1, name: '西湖龙井', type: '绿茶', price: 128, stock: 50, img: '/src/assets/tea/tea01.jpg', description: '清香扑鼻，色泽嫩绿。', originPrice: 160, sold: 39 },
  { id: 2, name: '安溪铁观音', type: '乌龙茶', price: 98, stock: 40, img: '/src/assets/tea/tea02.jpg', description: '兰花香气，口感醇厚。', originPrice: 120, sold: 31 },
  { id: 3, name: '普洱茶', type: '黑茶', price: 158, stock: 30, img: '/src/assets/tea/tea03.jpg', description: '陈香浓郁，越陈越香。', originPrice: 198, sold: 23 },
  { id: 4, name: '黄山毛峰', type: '黄茶', price: 88, stock: 60, img: '/src/assets/tea/tea04.jpg', description: '香气高雅，滋味鲜爽。', originPrice: 110, sold: 47 },
  { id: 5, name: '六安瓜片', type: '绿茶', price: 108, stock: 45, img: '/src/assets/tea/tea05.jpg', description: '片形独特，汤色清亮。', originPrice: 135, sold: 36 },
  { id: 6, name: '武夷岩茶', type: '乌龙茶', price: 168, stock: 35, img: '/src/assets/tea/tea06.jpg', description: '岩韵十足，香气持久。', originPrice: 210, sold: 27 },
  { id: 7, name: '信阳毛尖', type: '绿茶', price: 78, stock: 55, img: '/src/assets/tea/tea07.jpg', description: '嫩香持久，滋味鲜爽。', originPrice: 99, sold: 43 },
  { id: 8, name: '君山银针', type: '黄茶', price: 138, stock: 25, img: '/src/assets/tea/tea08.jpg', description: '针形秀美，汤色明亮。', originPrice: 168, sold: 19 },
  { id: 9, name: '祁门红茶', type: '红茶', price: 118, stock: 48, img: '/src/assets/tea/tea09.jpg', description: '蜜香浓郁，口感醇厚。', originPrice: 145, sold: 37 },
  { id: 10, name: '大红袍', type: '乌龙茶', price: 198, stock: 20, img: '/src/assets/tea/tea10.jpg', description: '岩骨花香，茶气十足。', originPrice: 238, sold: 16 },
  { id: 11, name: '云南滇红', type: '红茶', price: 128, stock: 38, img: '/src/assets/tea/tea11.jpg', description: '金毫显露，香气浓郁。', originPrice: 158, sold: 29 },
  { id: 12, name: '太平猴魁', type: '绿茶', price: 148, stock: 32, img: '/src/assets/tea/tea12.jpg', description: '叶形独特，香气高雅。', originPrice: 185, sold: 25 },
  { id: 13, name: '白毫银针', type: '白茶', price: 168, stock: 22, img: '/src/assets/tea/tea13.jpg', description: '毫香鲜爽，汤色清澈。', originPrice: 210, sold: 17 },
  { id: 14, name: '蒙顶甘露', type: '绿茶', price: 98, stock: 44, img: '/src/assets/tea/tea14.jpg', description: '甘醇爽口，香气清新。', originPrice: 120, sold: 34 },
  { id: 15, name: '武夷水仙', type: '乌龙茶', price: 158, stock: 28, img: '/src/assets/tea/tea15.jpg', description: '花果香气，岩韵明显。', originPrice: 195, sold: 21 },
  { id: 16, name: '寿眉', type: '白茶', price: 88, stock: 36, img: '/src/assets/tea/tea16.jpg', description: '汤色杏黄，滋味醇和。', originPrice: 110, sold: 28 },
  { id: 17, name: '金骏眉', type: '红茶', price: 188, stock: 18, img: '/src/assets/tea/tea17.jpg', description: '蜜香金毫，口感细腻。', originPrice: 228, sold: 14 },
  { id: 18, name: '凤凰单丛', type: '乌龙茶', price: 178, stock: 26, img: '/src/assets/tea/tea18.jpg', description: '花香馥郁，滋味醇厚。', originPrice: 215, sold: 20 },
  { id: 19, name: '竹叶青', type: '绿茶', price: 108, stock: 42, img: '/src/assets/tea/tea19.jpg', description: '清香高雅，汤色明亮。', originPrice: 135, sold: 33 },
  { id: 20, name: '老白茶', type: '白茶', price: 158, stock: 24, img: '/src/assets/tea/tea20.jpg', description: '陈香醇厚，口感顺滑。', originPrice: 198, sold: 18 },
];

const keyword = ref('');
const page = ref(1);
const inputPage = ref(1);
const maxPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
const pageSize = ref(12);
const total = computed(() => filteredTeas.value.length);

const teaTypes = ['绿茶', '红茶', '乌龙茶', '黑茶', '白茶', '黄茶'];
const selectedTypes = ref<string[]>([]);
const toggleType = (type: string) => {
  if (selectedTypes.value.includes(type)) {
    selectedTypes.value = selectedTypes.value.filter(t => t !== type);
  } else {
    selectedTypes.value.push(type);
  }
  keyword.value = '';
  page.value = 1;
};
const clearTypes = () => {
  selectedTypes.value = [];
  keyword.value = '';
  page.value = 1;
};

const filteredTeas = computed(() => {
  let teas = allTeas;
  if (selectedTypes.value.length > 0) {
    teas = teas.filter(tea => selectedTypes.value.includes(tea.type));
  }
  if (!keyword.value) return teas;
  return teas.filter(tea => tea.name.includes(keyword.value) || tea.type.includes(keyword.value));
});

const teas = computed(() => {
  const start = (page.value - 1) * pageSize.value;
  return filteredTeas.value.slice(start, start + pageSize.value);
});

const nextPage = () => {
  if (page.value < maxPage.value) {
    page.value++;
    inputPage.value = page.value;
  }
};
const prevPage = () => {
  if (page.value > 1) {
    page.value--;
    inputPage.value = page.value;
  }
};
const jumpPage = () => {
  let val = Number(inputPage.value);
  if (isNaN(val) || val < 1) val = 1;
  if (val > maxPage.value) val = maxPage.value;
  page.value = val;
  inputPage.value = val;
};
import { watch } from 'vue';
watch(page, (val) => {
  inputPage.value = val;
});
</script>

<style scoped>
.page-input {
  width: 48px;
  height: 36px;
  border: 1.5px solid #ffd591;
  border-radius: 10px;
  font-size: 1.18rem;
  text-align: center;
  margin: 0 8px;
  background: #fffbe6;
  box-shadow: 0 2px 8px #ffe7ba33;
  outline: none;
  transition: border 0.2s;
}
.page-input:focus {
  border-color: #ff6600;
}
.tea-list-container {
  max-width: 1400px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #eee;
  display: flex;
}
.tea-type-sidebar {
  width: 180px;
  margin-right: 32px;
  background: #fffbe6;
  border-radius: 16px;
  box-shadow: 0 4px 16px #ffe7ba;
  padding: 32px 16px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 32px;
  z-index: 10;
}
.tea-type-sidebar h3 {
  font-size: 20px;
  color: #223344;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}
.tea-type-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.tea-type-sidebar li {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 17px;
  color: #333;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px #ffd59111;
  border: 1px solid transparent;
}
.tea-type-sidebar li.active {
  background: #ffecb3;
  color: #ff6600;
  font-weight: bold;
  border: 1px solid #ffb300;
  box-shadow: 0 2px 8px #ffd591;
}
.tea-type-sidebar li:hover {
  background: #fff7e6;
  color: #ff8500;
}
.tea-list-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
.tea-list-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  color: #223344;
  margin-bottom: 32px;
  margin-top: 16px;
  letter-spacing: 2px;
}
.search-bar {
  margin-bottom: 16px;
}
.search-bar-beauty {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.search-input-wrap {
  position: relative;
  width: 320px;
}
.search-input-wrap input {
  width: 100%;
  padding: 10px 36px 10px 16px;
  border-radius: 8px;
  border: 1.5px solid #ffd591;
  font-size: 1.1rem;
  background: #fff;
  box-shadow: 0 2px 8px #ffe7ba;
  transition: border 0.2s;
}
.search-input-wrap input:focus {
  border-color: #ff6600;
  outline: none;
}
.search-clear {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: #ff6600;
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border-radius: 50%;
  transition: background 0.2s;
}
.search-clear:hover {
  background: #ffecb3;
}
.tea-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 32px;
  justify-content: center;
  margin-top: 24px;
  min-height: 480px;
  width: 100%;
}
.tea-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  background: #fffbe6;
  border-radius: 12px;
  box-shadow: 0 2px 8px #ffd591;
  padding: 16px;
  text-decoration: none;
  color: #333;
  transition: box-shadow 0.2s;
}
.tea-card:hover {
  box-shadow: 0 4px 16px #ffecb3;
}
.tea-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}
.tea-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.tea-type, .tea-price, .tea-stock {
  font-size: 14px;
  margin-bottom: 2px;
}
.tea-price {
  color: #ff6600;
  font-weight: bold;
}
.tea-desc {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}
.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.taobao-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px #ffd591;
  padding: 18px 18px 12px 18px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}
.taobao-card img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}
.taobao-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #222;
  margin-bottom: 6px;
  text-align: center;
}
.taobao-desc {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 8px;
  text-align: center;
}
.taobao-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.taobao-price {
  color: #e60012;
  font-size: 1.2rem;
  font-weight: bold;
}
.taobao-origin-price {
  color: #888;
  font-size: 1rem;
  text-decoration: line-through;
}
.taobao-stock {
  font-size: 0.98rem;
  color: #333;
  margin-bottom: 6px;
}
.taobao-progress-wrap {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.taobao-progress-bar {
  width: 90%;
  height: 16px;
  background: #ffe7e7;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2px;
}
.taobao-progress {
  height: 100%;
  background: #e60012;
  border-radius: 8px 0 0 8px;
  transition: width 0.3s;
}
.taobao-progress-text {
  font-size: 0.95rem;
  color: #e60012;
  font-weight: bold;
}
</style>
